<template>
    <outer-view>
      <div class="search-option-oneline">
        <a-form
          ref="formRef"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          class=""
          :model="searchOptions"
        >
          <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item label="类型">
                  <a-select v-model:value="searchOptions.type" style="width: 100%" ref="select" :defaultActiveFirstOption="true">
                    <a-select-option v-for="typeInfo in data.typeList" :key="typeInfo.id" :value="typeInfo.label">{{typeInfo.label}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="标题">
                  <a-input v-model:value="searchOptions.title"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="内容">
                  <a-input v-model:value="searchOptions.content"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6" style="text-align: right;padding-right:20px">
                <a-button type="primary" @click="clickSearch">搜索</a-button>
                <a-button type="primary" @click="addRecord">新增</a-button>
              </a-col>
          </a-row>
        </a-form>
      </div>
      <div class='search-table-oneline'>
        <a-table :columns="columns" @expand="expandEvent" :expandedRowKeys="expandedRowKeys" :data-source="data.dataList" :pagination=false rowKey="id" :scroll=tableHeight  :row-class-name="(_record:any, index:any) => (index % 2 === 1 ? 'table-striped' : null)">
          <template #bodyCell="{ record,column }">
            <template v-if="column.title === '操作'">
                <a-tag color="blue" @click="editRecord(record)">编辑</a-tag>
                <a-tag color="red" @click="deleteRecord(record)">删除</a-tag>
            </template>
            <template v-if="column.title === '内容'">
              <span>{{formateContent(record.content)}}</span>
            </template>
            <template v-if="column.title === '创建时间'">
              <span>{{dateFormater(new Date(Number(record.createTime)),'yyyy-MM-dd')}}</span>
            </template>
          </template>
          <template #expandedRowRender="{ record, index, indent, expanded }">
            <record-content :record="record" @saveContent="saveContent(record)"></record-content>
          </template>
        </a-table>
      </div>
    </outer-view>
    <a-modal :destroyOnClose="true" v-model:visible="editInfo.showEdit" :maskClosable="false" :title="editInfo.modelTitle" >
      <template #footer></template>
      <record-edit :record="editInfo.record" @save="saveRecord" @cancel="cancelRecord"></record-edit>
    </a-modal>
  </template>
  <script lang="ts">
  import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
  import { computed, defineComponent, reactive, ref, unref } from 'vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { createVNode } from 'vue';
  import { Modal } from 'ant-design-vue';
  import outerView from '../components/outerView.vue';
  import RecordContent from './record-content.vue';
  import RecordEdit from './record-edit.vue';
  import service from '@/axios';
  import {getHeight,dateFormater} from '@/util/util'

  const editInfo = reactive({
    showEdit:false,
    modelTitle:'新增记录',
    record:{}
  })

  let data = reactive({
    dataList:[],
    typeList:[] as Array<any>
  })

  const searchOptions = ref({
    type:'工作',
    title:'',
    content:'',
  })

  let expandedRowKeys = reactive([] as any)

  const expandEvent = function(expanded:boolean, record:any){
    debugger
    if(expanded){
      expandedRowKeys.push(record.id)
    }else{
      expandedRowKeys.splice(expandedRowKeys.indexOf(record.id),1)
    }
  }

  service.post('/coc/getDict',{type:'fl'}).then(res=>{
    data.typeList = res.data;
  })

  const formateTime = function(time:any){
    let date = new Date(Number(time))
    return dateFormater(date,'yyyy-MM-dd hh-mm-ss')
  }

  const formateContent = function(content:string){
      let matchResult = content.match(/(?<=<p>).*?(?=<\/p>)/)
      return matchResult ? matchResult[0] : content
  }

  const addRecord = function(){
    editInfo.record = {};
    editInfo.showEdit = true
  }

  const deleteRecord = function(record:any){
    Modal.confirm({
      content: '确认删除？'+record.title,
      icon: createVNode(ExclamationCircleOutlined),
      okText:'确定',
      onOk() {
        service.post('/record/deleteRecord',record).then(res=>{
          clickSearch();
        })
      },
      cancelText: '取消',
      onCancel() {
        Modal.destroyAll();
      },
    });


    // service.post('/record/deleteRecord',record).then(res=>{
    //   clickSearch();
    // })
  }

  const editRecord =function(record:any){
    debugger
    editInfo.modelTitle='编辑记录'
    editInfo.record = record;
    editInfo.showEdit = true
  }
  const cancelRecord = function(){
    editInfo.showEdit =false;
  }
  const saveRecord = function(){
    editInfo.showEdit = false;
    getRecords()
  }

  const saveContent = function(record:any){
    debugger
    expandEvent(false,record)
    clickSearch()
  }

  const getRecords = function(){
    service.post('/record/getRecords', unref(searchOptions)).then(res=>{
      console.log(res.data)
      data.dataList = res.data;
    })
  }

  const clickSearch = function(){
    getRecords();
  }

  const columns = [{title: '标题',dataIndex: 'title',key:'1'},
    {title: '内容',dataIndex: 'content',ellipsis:true,key:'2'},
    {title: '备注',dataIndex: 'mark',key:'3'},
    {title: '类型',dataIndex: 'type',key:'4'},
    {title: '创建时间',dataIndex: 'createTime',key:'5'},
    {title: '用户',dataIndex: 'userName',key:'6'},
    {title: '操作',width:'200px',key:'7'}];

  let tableHeight = ref({
    y:200
  })


  const handleChange = function(val:any){
    console.log(val)
  }
  
  
  export default defineComponent({
    components: {
    SmileOutlined,
    DownOutlined,
    outerView,
    RecordEdit,
    RecordContent
},
    mounted(){
      clickSearch();
      window.addEventListener('resize', getHeight(tableHeight,(32+32+12+40),"outer-div"))
    },
    setup() {
      return {
        data,
        columns,
        searchOptions,
        editInfo,
        addRecord,
        editRecord,
        formateTime,
        cancelRecord,
        saveRecord,
        clickSearch,
        deleteRecord,
        tableHeight,
        handleChange,
        formateContent,
        saveContent,
        expandedRowKeys,
        expandEvent,
        dateFormater
      };
    },
  });
  </script>
  <style scoped>
    .search-option-oneline{
      background-color: #FFF;
      padding: 10px 10px;
    }

  
    ::v-deep(.table-striped) td {
    background-color: #fafafa;
  }
  </style>